<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="ctv" value="${pageContext.request.contextPath}/static/front/"></c:set>
<c:set var="cxv" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>新闻发布系统</title>

    <link rel="stylesheet" href="${ctv}index.css">
</head>
<body>
<nav class="navbar">
    <div class="container navbar-content">
        <a href="#">首页</a>
        <a href="#">关于我们</a>
    </div><!-- /.container-fluid -->
</nav>

<img src="${ctv}bg.jpg" class="index-bg">
<div class="container">
    <h1>新闻发布系统</h1>
    <h4></h4>

    <div class="news-list">
        <div class="news-list-left">

            <script type="text/html" id="news-item">

                <div class="news-list-item">
                    <div class="author-time">
                        <span>{{createUserName}}</span> 发表于 <span>{{sendTime}}</span>
                    </div>
                    <div class="news-des">
                        <h3 class="news-title"><i></i><a href="#">{{title}}</a></h3>
                        <div class="news-content-des">{{context}}</div>
                    </div>
                </div>

</script>

        </div>
        <div class="news-list-right">
            <div class="about">
                <h4>关于我们</h4>
                <div class="about-des">
                    <p>安徽修补匠科技有限公司竭诚为您服务！</p>
                    <p>只要998，就能让你爽到不能呼吸~~</p>
                </div>
            </div>
        </div>

               
        <footer class="copyright">
            <strong><a href="javascript:" class="more-view" pageNum="1">查看更多 · ·
                ·</a></strong></br></br></br>
                      Copyright &nbsp; 2018 DreamBoy All rights reserved.
        </footer>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/template-web.js"></script>
<script type="text/javascript">
    $(function () {
        // 异常加载数据
        // ajax
        function dataLoad(pageNum) {
            // 括号内参数依次是：请求路径，请求参数，请求回调函数
            $.post("${cxv}/index", {"pageNum": pageNum}, function (data) {
                $(".more-view").data("data-pageNum", data.pageNum);//赋值当前页
                $(".more-view").data("data-pageCount", data.pageCount);
                $(".more-view").data("data-pageSize", data.pageSize);
                for (var index in data.list) {
                    var html = template("news-item",data.list[index]);
                    $(".news-list-left").append(html);
                }
            }, "json");
        }
        dataLoad(1);
        //下一页
        $(".more-view").click(function (data) {
            var pageNum = parseInt($(this).data("data-pageNum"));
            var maxPage = (parseInt($(this).data("data-pageCount")) - 1) / (parseInt($(this).data("data-pageSize")) + 1);
            if (pageNum > maxPage) {
                $(".more-view").text("TnT 我是有底线的~~");
            } else {
                dataLoad(pageNum + 1);
            }
        });
    });
</script>